<template>
    <div>
        <model-view :editStatus="editStatus" v-if="dialogVisible" :obj="useData" @closeAction="closeAction"
                    :dialogVisible="dialogVisible"></model-view>
        <el-card>
            <el-row>
                <el-form style="margin-top: 10px">
                    <el-form-item label="生效时间：" style="width: 320px;float: left">
                        <el-date-picker v-model="date" value-format="yyyy-MM-dd" type="date" style="width: 150px"/>
                    </el-form-item>
                    <el-form-item style="float: left">
                        <el-button size="mini" type="primary" style="float: left;margin-top:5px" @click="search">查询
                        </el-button>
                        <el-button size="mini" type="primary" style="float: left;margin-top:5px"
                                   @click="add">新增
                        </el-button>
                        <el-button size="mini" type="primary" style="float: left;margin-top:5px" @click="delAll">删除选中
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table :border="true" :stripe="true"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="entry"
                        label="排序号"
                        fixed="left"
                        align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="条目"
                        align="center"
                        width="200">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="条目名称"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="startDate"
                        label="开始时间"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="结束时间"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="结算sql"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="计划sql"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="关联电厂"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                            删除
                        </el-button>

                        <el-button @click.native.prevent="editRow(scope.$index, tableData)" type="text" size="small">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>

</template>
<script>
    import ModelView from './ModelView';

    export default {
        components: {
            ModelView
        },
        data() {
            return {
                //每行的数据
                useData: {},
                //是否编辑状态
                editStatus: false,
                dialogVisible: false,

                date: new Date(),
                tableData: [{
                    startDate: '2016-05-03',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    startDate: '2016-05-02',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    startDate: '2016-05-04',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    startDate: '2016-05-01',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    startDate: '2016-05-08',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    startDate: '2016-05-06',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    startDate: '2016-05-07',
                    entry: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            };
        },
        methods: {
            search() {
                this.queryParam.pageInfo.pageNum = 1;
                this.queryPage(this.queryParam);
            },
            add() {
                this.dialogVisible = true;
                this.editStatus = false;
                this.useData = {};
            },

            delAll() {
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },

            editRow(index, rows) {
                this.dialogVisible = true;
                this.editStatus = true;
                this.useData = rows[index];
            },

            closeAction() {
                this.dialogVisible = false;
            }
        }
    };
</script>
<style scoped>

</style>